<template>
    <div class="box">
        <div class="top">
        <div class="left">
        <el-input
      v-model="input"
      class="w-50 m-2"
      size="large"
      placeholder="请输入搜索关键字"
   
    />
    <div class="button">
        <el-button type="primary" class="btn" @click="search">搜索</el-button>
    </div>
    </div>

    <div class="right">
        <el-select v-model="options.value" filterable placeholder="状态" size="large" class="select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    <div class="button">
        <el-button type="primary" class="btn" @click="selectStatus">筛选</el-button>
    </div>
    </div>
    <!-- 增加用户 -->
    <div class="addUser">
        <div class="button">
        <el-button type="primary" class="addnewrole" @click="getRole">新增用户</el-button>
        <el-dialog v-model="dialogFormVisible" title="新增用户" >
    <el-form :model="form">
    <div class="addTop">
        <div class="one">
            <el-form-item label="登录账号" :label-width="formLabelWidth" class="three">
        <el-input v-model="form.account" autocomplete="off" class="addInput"/>
      </el-form-item>
      <el-form-item label="用户姓名" :label-width="formLabelWidth" class="three">
        <el-input v-model="form.userName" autocomplete="off"  class="addInput"/>
      </el-form-item>
        </div>
     
        <div class="one one_sex">
            <el-form-item label="性别" :label-width="formLabelWidth" class="three _one ">
        <el-select v-model="form.sex" placeholder="请选择性别" class="sex addInput" >
          <el-option label="女" value=0 />
          <el-option label="男" value=1 />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" :label-width="formLabelWidth" class="phone three _two ">
        <el-input v-model="form.phone" autocomplete="off"  class="addInput" />
      </el-form-item>
        </div>
      <div class="one">
        <el-form-item label="电子邮箱" :label-width="formLabelWidth" class="three _three">
        <el-input v-model="form.email" autocomplete="off"  class="addInput"/>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth" class="three _four ">
        <el-input v-model="form.state" autocomplete="off"  class="addInput" />
      </el-form-item>
      </div>
      <el-form-item label="用户密码" :label-width="formLabelWidth" class="three _five">
        <el-input v-model="form.password" autocomplete="off" class="password addInput"  />
      </el-form-item>
      <div class="title">角色分配</div>
    </div>
    <div class="addBottom">
        <el-table :data="addTableData" style="width: 100%" @select="(selection:any,index:any)=>select(selection,index)">
    <el-table-column type="selection" width="45" align="center"     />
    <el-table-column prop="title" label="角色名称" align="center" />
    <el-table-column prop="id" label="角色编码" align="center"/>
  </el-table>


    </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addUser">保存</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
       取消
        </el-button>
      </span>
    </template>
  </el-dialog>


    </div>
    </div>
    </div>
    <!-- 用户编辑 -->
   <div class="addUser">
    <el-drawer v-model="add" title="I am the title" :with-header="false" size="24%"  :before-close="handleClose">
      
      <div><span>登录账号：</span><el-input v-model="user.userId" autocomplete="off" class="editInput" /></div> 
      <div><span>登录密码：</span><el-input v-model="user.pwd" autocomplete="off" class="editInput" /></div> 
      <div><span>用户姓名：</span><el-input v-model="user.userName" autocomplete="off" class="editInput"/></div> 
      <div class="editOne"><span>性别：</span><el-input v-model="user.sex" autocomplete="off" class="editInput"/></div>   
      <div><span>手机号码：</span><el-input v-model="user.phonenum" autocomplete="off" class="editInput"/></div>  
      <div> <span>电子邮箱：</span><el-input v-model=user.email autocomplete="off" class="editInput"/></div> 
      <div class="editOne"><span>状态：</span><el-input v-model="user.status" autocomplete="off" class="editInput"/></div>   
     <div><span>更新时间：</span><el-input v-model="user.logintime" autocomplete="off" class="editInput" /></div>  
  </el-drawer>


 
   </div>
    <!-- 表格 -->
    <div class="from">
        <el-table
    :data="tableData"
    style="width: 100%"
    
    @select-all="(selection:any)=>selectAll(selection)"
    row-key="ok"
    #default="scope"
  >
    <el-table-column prop="userId" label="登录账号" align="center"  width="108px"  />
    <el-table-column prop="userName" label="用户姓名" align="center"  width="168px"  />
    <el-table-column prop="sex" label="性别" align="center"  width="128px"  />
    <el-table-column prop="phonenum" label="手机号码" align="center" />
    <el-table-column prop="email" label="电子邮箱"  width="168px"  align="center" />
    <el-table-column prop="status" label="状态" align="center"  width="98px" />
    <el-table-column prop="logintime" label="更新时间" width="168px"  align="center" />
    <el-table-column label="操作"  width="200px" align="center" >
   
      <template #default="scope" class="middle">
     <span @click="handleView(scope.$index, scope.row)" class="view">查看</span>
     <span @click="handleEdit(scope.$index, scope.row)" class="edit" >编辑</span>
     <span @click="handleStop(scope.$index, scope.row)" class="stop">停用</span>
     <span @click="handleDel(scope.$index, scope.row)" class="del">删除</span>  
    </template>
    </el-table-column>
  
  </el-table>
  <el-dialog
    v-model="view"
    title="角色基本信息"
    width="30%"
    :before-close="closeView"
  >
      <div class="roleViews">
   <span>登录账号:</span> {{viewUserId}}
      </div>
      <div class="roleViews">
        <span>用户姓名:</span>{{viewUserName}}
      </div>
      <div class="roleViews">
        <span>性别:</span>{{viewSex}}
      </div>
      <div class="roleViews">
        <span>手机号码:</span>{{viewPhone}}
      </div>
      <div class="roleViews">
        <span>电子邮箱:</span>{{viewEmail}}
      </div>
      <div class="roleViews">
        <span>状态:</span>{{viewStatus}}
      </div>
      <div class="roleViews">
        <span>更新时间:</span>{{viewLoginTime}}
      </div>
    
    

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="view = false">
         关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
<!-- 分页 -->
<div class="page"> 
        <el-pagination background layout="prev, pager, next" :total="dataLength"  @current-change="handleCurrentChange" v-model:current-page="currentPage" />

    </div>
    </div>

    </div>
    
  
</template>

<script lang="ts">
import axios from "axios"
import {defineComponent,reactive,onMounted,toRefs,ref} from 'vue'
import { ElMessageBox } from 'element-plus'
import { fromPairs } from "lodash"
export default defineComponent({
         setup(){  

          const view= ref(false)
//分页
let dataLength:any=ref("")
let currentPage:any= ref(1)
const handleCurrentChange=(val:any)=>{
 
  console.log(`current page: ${val}`)

}
       

   //表格数据的获取 
     let tableData:any=ref([])
   
     function GetUserData(){
      axios({
             method:"post",
             url:"http://1.14.73.59:8080/user/allselect",
             params:{
               page:1,
               limit:10,
              
             },
             headers:{
              // authorization:"eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIwNTEwOWJlOC01ZmU5LTQ0NzYtOWE3Yy0zZGQ0MWY5NTY3MDUiLCJpc3MiOiJiajIzMl9qd3Rfc2VjZXJ0Iiwic3ViIjoie1wiY3JlZGVudGlhbHNcIjpcIjEyMzQ1NlwiLFwicGFzc3dvcmRcIjpcIjEyMzQ1NlwiLFwicHJpbmNpcGFsXCI6XCJhZG1pblwiLFwicmVtZW1iZXJNZVwiOmZhbHNlLFwidXNlcm5hbWVcIjpcImFkbWluXCJ9IiwiaWF0IjoxNjc2ODkxNzE2LCJleHAiOjE2NzY4OTM1MTZ9.g_wHMJM_SbyLYXhc1S8byiQ4uM4jo0UD3gx-OAuDsEs",
              //   "content-type":"application/json;charset=UTF-8",
               }
         }).then(resp=>{
          tableData.value=resp.data.data
          // console.log(resp.data.conut)
          dataLength.value=resp.data.conut
    const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
   }  
         
    //  console.log(tableData.value)
      
              
     for(let i=0;i<tableData.value.length;i++){
                  tableData.value[i].logintime=getDate(  tableData.value[i].logintime)
                  if(tableData.value[i].status==1||tableData.value[i].sex==1){
                  tableData.value[i].status="正常"
                  tableData.value[i].sex="男"

                 
                }else{
                  tableData.value[i].status="停用"
                  tableData.value[i].sex="女"
                }  
                    
     }
               
            // tableData.value[i]logintime=getDate(tableData.value[i].updateTime)
          //   // console.log(tableData.value[i].id)
          // }

         })
     }
    onMounted(()=>{
      GetUserData()
    })
    //批量删除
    const allDell=()=>{
        
       
    }
    //全选
    const selectAll=(a:any)=>{
              
    }
    // 选择删除
  

       //筛选
   const selectStatus=()=>{

    // console.log(111,options.value)
           axios({
              url:"http://1.14.73.59:8080/user/staticselect",
              method:"post",
              params:{
                  limit:10,
                  page:1,
                  static:options.value,
                
              }
           }).then(resp=>{
            //  console.log(resp.data)
            tableData.value=resp.data.data
            const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
   }  
         
    //  console.log(tableData.value)
      
              
     for(let i=0;i<tableData.value.length;i++){
                  tableData.value[i].logintime=getDate(  tableData.value[i].logintime)
                  if(tableData.value[i].status==1||tableData.value[i].sex==1){
                  tableData.value[i].status="正常"
                  tableData.value[i].sex="男"

                 
                }else{
                  tableData.value[i].status="停用"
                  tableData.value[i].sex="女"
                }  
                    
     }
           })          

   }
   let roleId:any=ref("")
   const select=(a:any,b:any)=>{
      // console.log(b.id)
      roleId.value=b.id
     
         
       
   

        
}

const getRole=()=>{
  dialogFormVisible.value = true
        axios({
            url:"http://1.14.73.59:8080/user/Role",
            method:"post"
        }).then(resp=>{
            // console.log(resp.data.data)
            addTableData.value=resp.data.data
         
        })
}
  // console.log(roleId.value)
   //增加用户
   const addUser=()=>{
    // console.log(parseInt(form.value.sex))
    // console.log(roleId)
    // console.log(form.value.phone)
    // console.log(form.value.account)

    dialogFormVisible.value =false
    axios({
       url:"http://1.14.73.59:8080/user/add",
       method:"post",
       data:{
          realname:form.value.userName,
          name:form.value.userName,
          email:form.value.email,
          sex:parseInt(form.value.sex),
          userid:parseInt(form.value.account),
          phone:parseInt(form.value.phone),
          pwd:form.value.password,
          roleid:roleId.value,
       
      //     email: "string",
      //   name: "string",
      //  phone: 0,
      // pwd: "string",
      //  realname: "string",
      //  role: "string",
      //  roleid: 5,
      //   sex: "string",
      //   status: 1,
      //   userid: 5
       }
    }).then(resp=>{
      GetUserData()

          //  console.log(resp.data)
    })
          
   }



//查看
let viewEmail=ref("")
let viewLoginTime=ref("")
let viewPhone=ref("")
let  viewUserName=ref("")
let  viewSex=ref("")
let  viewStatus=ref("")
let  viewUserId=ref("")
   const handleView=(index:any,row:any)=>{
          view.value=true
          // console.log(row)
         viewEmail.value=row.email
         viewLoginTime.value=row.logintime
         viewPhone.value=row.phonenum
          viewUserName.value=row.userName
               viewUserId.value=row.userId
                   viewSex.value= row.sex
                   viewStatus.value=row.status

   }
   let closeView=()=>{
    view.value=false
   }
   const add = ref(false)
   //查询
   const editUser=()=>{
          add.value=false

   }
   const handleEdit=(index:any,row:any)=>{
                  add.value=true
              // console.log(row)
                    user.value=row
          
           

      }
      const handleClose = (done: () => void) => {
       ElMessageBox.confirm('确定保存修改好的用户信息?')
    .then(() => {
          console.log(user.value.pwd)
      axios({
                 url:"http://1.14.73.59:8080/user/update",
                 method:"post",
                 data:{
                       
             "email": user.value.email,
             "phone": parseInt(user.value.phone),
             "pwd": user.value.pwd,
            "realname": user.value.userName,
             "roleid": roleId.value,
             "sex": user.value.sex,
             "status": user.value.status,
              "userid":parseInt(user.value.userId)

  // "email": "string",
  // "name": "string",
  // "phone": 0,
  // "pwd": "string",
  // "realname": "string",
  // "role": "string",
  // "roleid": 0,
  // // "sex": "string",
  // "status": user.value.status,
  // "userid":parseInt(user.value.userId)


                 }
              }).then(resp=>{
                 console.log(resp.data,222)
              })
      done()
    })
    .catch(() => {
      // catch error
    })
}
      const handleDel=(index:any,row:any)=>{
            tableData.value.splice(index,1)
            console.log(row)
         axios({
            url:"http://1.14.73.59:8080/user/delete",
            method:"post",
            params:{
               id:row.userId
            }
         })

            
      }
      const handleStop=(index:any,row:any)=>{
        row.status="停用"
      }
       
    //查询
         const search=()=>{
       
               axios({
                 url:"http://1.14.73.59:8080/user/nameselect",
                 method:"post",
                 params:{
                  page:1,
               limit:10,
               name:input.value

                 }
               }).then(resp=>{
                    // console.log(resp.data)
                    tableData.value=resp.data.data
                    
               })
            
         } 
           
        
            const dialogTableVisible = ref(false)
             const dialogFormVisible = ref(false)
            const formLabelWidth = '140px'  
           let user:any =ref({
              userName:'',
           password:"",
           email:"",
           phonenum:"",
          userId:"",
           status:"",
           sex:"",
           logintime:"",
           pwd:""
            })

            let form:any = ref({
           userName: '',
             date1: '',
            date2: '',
            delivery: false,
          type: [],
          resource: '',
           desc: '',
           password:"",
           email:"",
           phone:"",
           account:"",
           state:"",
           sex:"",
          


})
         let input = ref("") 
          const value=ref("")
          let options:any=reactive([
            {
                value:"1",
                label:"正常"
            },{
              value:"0",
                label:"停用"
            }
          ])
     //添加角色表格
    let addTableData:any =ref([


]) 
     


   


   
             return{
                 input,
                 value,
                 options,
                 tableData,
                 handleEdit,
                 handleDel,
                 handleStop,
                 handleView,
                 dialogTableVisible,
                 dialogFormVisible,
                 formLabelWidth,
                 form,
                 addTableData,
                 search,
                 addUser,
                 add,
                 user,
                 editUser,
                 handleClose,
                 allDell,
                 select,
                 selectAll,
                 selectStatus,
                 view,
                 closeView,
                 viewEmail,
                 viewLoginTime,
                 viewStatus,
                 viewPhone,
                 viewSex,
                 viewUserId,
                 viewUserName,
                 dataLength,
                 currentPage,
                 handleCurrentChange,
                 getRole
     
               


                 
             }
         }
         
       
})

 
</script>

<style scoped lang="less">
/* 添加用户 */
.marTop(@top){
   position: relative;
  top: @top;
}
.addnewrole{
   position: relative;
   top:-9px;
   height: 40px;
}
.editOne{
   margin-left: 32px;
}
.addUser div{
margin-top: 10px;
}
.addUser span{
 position: relative;
 top: 6px;
}
.addBottom{
    position: relative;
    bottom: 40px;
}
.title{
 position: relative;
 bottom: 50px;
 font-size: 18px;
 color: #303133;
}

.editInput{
  width: 220px;
}
._one{
    .marTop(-26px)
}
._two{
    .marTop(-26px)
}
._three{
    .marTop(-60px)
}
._four{
    .marTop(-60px)
}
._five{
    .marTop(-70px)
}
.three{
 position: relative;
 bottom: 14px;
}
.addTop{
    position: relative;
    bottom: 30px;
}
.password{
     width: 198px;
}
.sex{
width: 120px;
}
.phone{
    position: relative;
    left: 76px;
}
.one{
    display: flex;
}
.box{
    width: 1300px;
}
.anyDel{
     margin-top: 18px;
     color: #00ccff;
     cursor: pointer;
}
.page{
     margin-top: 48px;
     position: relative;
     left: 131px;  
}
.top{
    display: flex;
    margin-left: 18px;
    margin-top: 18px;
}
.select{
  width: 134px;
 
}
.right{
  display: flex;
  margin-left: 66px;
}
.left{
     width:340px;
     display: flex;

}
.button{
  margin-left: 10px;
}
.btn{
     height: 39px;
     position: relative;
     top: 1px;
}
.del{
    color:#ff3300;
    margin-left: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.view{
    color:#00ccff ;
    margin-left: 10px;
    font-weight: 600;
    cursor: pointer;
}
.stop{
    color: #ff9933;
    margin-left: 10px;
    font-weight: 600;
    cursor: pointer;
}
.edit{
    color:#00cc99 ;
    margin-left: 10px;
    font-weight: 600;
    cursor: pointer;
}
.from{
    width: 1300px;
     margin-top: 80px;
   
}
.addUser{
     position: relative;
     left: 576px;
}
.w-50{
  height: 40px;
}
.selectRole{
  position: relative;
  top: -24px;
}
.roleViews{
  position: relative;
  top: -12px;
   margin-top: 12px;
}
.roleViews>span{
  color: blue;
  margin-right: 8px;
}
.addInput{
  position: relative;
  top: -10px;
}
.one_sex{
    position: relative;
    top: -12px;
}
</style>